Who should take this course?

Grokking JavaScript Fundamentals

Rate this course

Ask Author

Contribute

Back to course home

0% completed

Vote For New Content

Introduction

Who should take this course?

Course Overview

Introduction to JavaScript

JavaScript Basics

JavaScript - Hello World

JavaScript - Comments

Quiz

JavaScript Variables and Operators

JavaScript - Variables

JavaScript - Operators

Quiz

JavaScript Conditionals

Introduction to Conditional Statements in JavaScript

JavaScript - If...Else

JavaScript - Switch Case

Quiz

JavaScript Objects

Introduction to Objects in JavaScript

JavaScript - Number

JavaScript - Boolean

JavaScript - Math

JavaScript - Date

Quiz

JavaScript - Functions

Introductions to Function in JavaScript

JavaScript - Variable Scope

JavaScript - Default Parameters

JavaScript - Arrow Functions

Quiz

JavaScript - String and Arrays

Introduction to Strings in JavaScript

JavaScript - String Methods

Introduction to Array in JavaScript

JavaScript - Array Methods

Quiz

JavaScript Loops

Introduction to loops in JavaScript

JavaScript - for loop

JavaScript - while loop

JavaScript - do-while loop

JavaScript - for-in loop

JavaScript - for-of loop

JavaScript - Loop Control

Quiz

JavaScript - Maps and Sets

JavaScript - Maps

JavaScript - Sets

Quiz

Conclusion

Where to Go from Here

JavaScript - Variable Scope

Understanding variable scope in JavaScript is fundamental to writing clear and effective code. Scope determines where variables can be accessed or referenced in your code.

There are three main types of scope:

block scope
function scope
global scope

Understanding these scopes and how they differ is crucial for writing effective and error-free JavaScript code.

Understanding var, let, and const

var: The var keyword is the traditional way to declare variables in JavaScript. Variables declared with var have function scope, which means they are accessible anywhere within the function they are declared in. If declared outside of any function, they are globally scoped. One important characteristic of var is variable hoisting, where the declaration is moved to the top of its scope during code execution.

let: The let keyword, introduced in ES6 (ECMAScript 2015), provides block scope for variables. This means variables declared with let are only accessible within the nearest set of curly braces {} (a block) in which they are defined. let helps avoid issues with variable hoisting and provides a clearer, more predictable scope.

const: The const keyword, also introduced in ES6, is similar to let in that it provides block scope. However, const is used to declare variables that cannot be reassigned after their initial assignment. This makes const ideal for values that should remain constant throughout the code.

Block Scope

let and const have block scope, meaning they are only accessible within the nearest set of curly braces {} (a block) in which they are defined.

Example: Demonstrating Block Scope

Javascript

. . . .

let blockScopedVar = "I am block scoped."; declares a variable within an if block.
Inside the block, console.log(blockScopedVar); accesses and prints the variable's value.
Attempting to access blockScopedVar outside its block (commented out line) would result in a ReferenceError because blockScopedVar is not accessible outside the block in which it's defined.

Function Scope

var is scoped to the nearest function block, whereas let and const are scoped to the nearest enclosing block.

Example: let and const in Function Scope

Javascript

function test_func() {
  if (true) {
    var functionScopedVar = "I am function scoped with var";
    let blockScopedLet = "I am block scoped with let";
    const blockScopedConst = "I am block scoped with const";
  }
  console.log(functionScopedVar); // Outputs: I am function scoped with var
  // console.log(blockScopedLet); // Uncaught ReferenceError: blockScopedLet is not defined
  // console.log(blockScopedConst); // Uncaught ReferenceError: blockScopedConst is not defined
}
test_func();

. . . .

Inside test_func, var functionScopedVar = "I am function scoped with var"; is accessible anywhere in the function.
let blockScopedLet = "I am block scoped with let"; and const blockScopedConst = "I am block scoped with const"; are not accessible outside the if block, demonstrating their block scope.

Global Scope

Variables declared outside any function or block are in the global scope and can be accessed from anywhere in the code.

Example: Variables in Global Scope

Javascript

var globalVar = "I am a global var";
let globalLet = "I am a global let";
const globalConst = "I am a global const";
function accessGlobalScope() {
  console.log(globalVar); // Outputs: I am a global var
  console.log(globalLet); // Outputs: I am a global let
  console.log(globalConst); // Outputs: I am a global const
}
accessGlobalScope();
console.log(globalVar); // Outputs: I am a global var
console.log(globalLet); // Outputs: I am a global let
console.log(globalConst); // Outputs: I am a global const

. . . .

globalVar, globalLet, and globalConst are declared outside any function or block, placing them in the global scope.
These variables are accessible both inside and outside accessGlobalScope, demonstrating global scope accessibility.

Comparison of Scopes

Scope	Declaration	Accessibility
Block Scope	`let`, `const`	Within the enclosing `{}` only.
Function Scope	`var`, `let`, `const`	Within the function it is declared in.
Global Scope	`var`, `let`, `const`	Anywhere in the code.

Introductions to Function in JavaScript

JavaScript - Default Parameters

Mark as Completed

On this page

Understanding var, let, and const

Block Scope

Example: Demonstrating Block Scope

Function Scope

Example: let and const in Function Scope

Global Scope

Example: Variables in Global Scope